<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片上传</title>
</head>
<body>
<input type="file" id="upload" value="单图片上传"/>
<button id="btn">上传图片</button>
<img src="" alt="" id="img">
<div id="progress" style="height: 30px;width:0;background: red"></div>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    //http://www.mtxc.xyz:7001/upload
    let oUpload = document.getElementById('upload');
    let oBtn = document.getElementById('btn');
    let OProgress = document.getElementById('progress');
    let OImg = document.getElementById('img');
    let formData = new FormData();
    oUpload.onchange = function (e) {
        e = e || window.event;
        let file = e.target.files[0];
        if (!file) {
            alert('没有选择')
            return;
        }
        formData.append("file", file);
        let reader = new FileReader();
        reader.onload = function (e) {
            OImg.src = reader.result;
        }
        reader.readAsDataURL(file);
        e.target.value = '';
    }

    oBtn.onclick = function () {
        axios.post('http://www.mtxc.xyz:7001/upload', formData, {
            headers: { "Content-Type": "multipart/form-data" },
            onUploadProgress: e => {
                let completeProgress = ((e.loaded / e.total * 100) | 0) + "%";
                console.log(completeProgress);
                OProgress.style.width = completeProgress;
            }
        }).then(function (response) {
            if(response.data.status){
                alert('上传成功')
            }else{
                alert(response.data.msg);
            }
        })
        .catch(function (error) {
            alert('上传失败')
        });
    }
</script>
</body>
</html>
